<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<style>
  table{
   width: 500px;
   height: 100px;
   }
   td{
    text-align: center;
   }
   span{
    display: inline-block;
    width: 100px;
   }
   .active{
    color:red
   }
   .box{
    width: 200px;
    height: 200px;
    text-align: center;  
}

</style>
<body>
    <div id="app" >
     <table cellspacing="0" border="1">
      <tr>
        <th>编号</th>
        <th>科目</th>
        <th>成绩</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,index) in list" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.class}}</td>
        <td :class="{active:item.sroce<60}">{{item.sroce}}</td>
        <td><a href="#" @click="del(index)">删除</a></td>
      </tr>
      <tr >
        <td colspan="4"><span>总分：{{total}}</span><span>平均分:{{mean}}</span></td>
        
    </tr>
     </table>
     <div class="box">
        科目：<input v-model.trim="class1"  type="text" >
        <br><br>
        分数：<input v-model.number="sroce" type="text"placeholder='请输入分数' >
        <br><br>
        <button @click="add()">添加</button>
     </div>
    </div>
</body>
<script>
   const app=new Vue({
    el:'#app',
    data:{
        class1:"",
        sroce:"",
        list:[
            {id:1,class:'语文',sroce:46},
            {id:2,class:'英语',sroce:80},
            {id:3,class:'数学',sroce:100},
        ],
    },
    methods:{
        del(id){
            this.list.splice(id,1);
        },
        add(){
            this.list.push({id:4,class:this.class1,sroce:this.sroce});
        }
    },
    computed:{
        total(){
            return this.list.reduce((sum,item)=>sum+item.sroce,0);
        },
        mean(){
            return parseInt( this.total/this.list.length)
        }
    }
   })
</script>
</html>